<!--
 * @Author: aster lipian1004@163.com
 * @Date: 2025-02-20 17:10:10
 * @FilePath: \aster-flowable-uniapp\src\components\form\render\grid-title.vue
 * @Description: 分组标题
 * Copyright (c) 2025 by Aster, All Rights Reserved.
-->
<template>
  <van-collapse v-model="activeNames" accordion v-if="!_hidden">
    <van-collapse-item :name="formItem.id">
      <template #title>
        <view
          :class="['flex', 'items-center', `${formItem.props.justify}`]"
          style="width: 100%; color: #606266"
        >
          <span :class="[formItem.props.fontSize, formItem.props.fontWeight]">
            {{ formItem.title }}
          </span>
        </view>
      </template>
      <template v-for="(item, i) in _items" :key="i">
        <form-design-render
          v-if="item.name === 'GridLayout'"
          v-model:value="_value"
          :form-item="item"
          :form-data="_value"
          :mode="mode"
        />
        <form-design-render
          v-else
          v-model:value="_value[item.id]"
          :form-item="item"
          :form-data="_value"
          :mode="mode"
        />
      </template>
    </van-collapse-item>
  </van-collapse>
</template>
<script setup lang="ts">
  import { computed, onMounted, PropType, ref } from 'vue';
  import { evaluateFormula } from '@/utils/workflow';
  import { FormPermissionEnum } from '@/enums/workFlowEnum';
  import FormDesignRender from '@/components/form/form-design-render.vue';

  const emits = defineEmits(['update:value']);
  const props = defineProps({
    value: {
      type: Object as PropType<WorkForm.FormDataModel>,
      default: {},
    },
    mode: {
      type: String as PropType<'design' | 'form' | 'search' | 'table' | 'print'>,
      default: 'design',
    },
    formItem: {
      type: Object as PropType<WorkComponent.ComponentConfig>,
      default: {},
    },
    formData: {
      type: Object as PropType<WorkForm.FormDataModel>,
      default: () => {},
    },
    tableId: {
      type: String,
      default: '',
    },
    tableIndex: {
      type: Number,
      default: 0,
    },
    showLabel: {
      type: Boolean,
      default: true,
    },
  });

  // 活动面板
  const activeNames = ref<string>('');

  /**
   * @description: 子组件
   * @return {*}
   */
  const _items = computed({
    get() {
      return props.formItem.props.items;
    },
    set(val) {
      props.formItem.props.items = val;
    },
  });

  /**
   * @description: 组件值
   */
  const _value = computed({
    get() {
      return props.value;
    },
    set(val) {
      emits('update:value', val);
    },
  });

  /**
   * @description: 是否隐藏, true-隐藏
   */
  const _hidden = computed(() => {
    let r = false;
    // 解析隐藏条件公式
    if (props.formItem.props.hidden) {
      r = evaluateFormula(props.formItem.props.hidden, props.value);
    }
    // 判断流程节点下该控件是否隐藏
    if (props.formItem.operation && props.formItem.operation.length > 0) {
      r = r || props.formItem.operation[0] == FormPermissionEnum.HIDDEN;
    }
    return r;
  });

  onMounted(() => {
    if (props.formItem.id) {
      activeNames.value = props.formItem.id;
    }
  });
</script>
<style scoped lang="scss"></style>
